<!DOCTYPE html>
<html>
  <head lang="kr">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>2.6 [Column Chart] stack column chart with connector</title>
    <link rel="stylesheet" type="text/css" href="../dist/tui-chart.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/theme/neo.css"
    />
    <link rel="stylesheet" type="text/css" href="./css/example.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="code-html" id="code-html">
        <div id="chart-area"></div>
      </div>
      <div class="custom-area">
        <div id="error-dim">
          <span id="error-text"></span>
          <div id="error-stack"></div>
          <span id="go-to-dev-tool"
            >For more detail, open browser's developer tool and check it out.</span
          >
        </div>
        <div class="try-it-area">
          <h3>try it</h3>
          <textarea id="code"></textarea>
          <div class="apply-btn-area">
            <button class="btn" onclick="evaluationCode(chartCM, codeString);">Run it!</button>
          </div>
        </div>
      </div>
    </div>
    <script
      type="text/javascript"
      src="https://uicdn.toast.com/tui.chart/latest/raphael.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"
    ></script>
    <script src="../dist/tui-chart.js"></script>
    <script class="code-js" id="code-js">
      var container = document.getElementById('chart-area');
      var data = {
        categories: ['May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
          {
            name: 'Budget',
            data: [4000, 5000, 3000, 5000, 7000, 6000, 4000, 1000]
          },
          {
            name: 'Income',
            data: [7000, 8000, 1000, 7000, 2000, 7000, 3000, 5000]
          },
          {
            name: 'Expenses',
            data: [5000, 4000, 4000, 6000, 3000, 4000, 5000, 7000]
          },
          {
            name: 'Debt',
            data: [3000, 6000, 3000, 3000, 1000, 2000, 4000, 3000]
          }
        ]
      };
      var options = {
        chart: {
          width: 1160,
          height: 540,
          title: 'Monthly Revenue',
          format: '1,000'
        },
        yAxis: {
          title: 'Amount'
        },
        xAxis: {
          title: 'Month'
        },
        series: {
          stack: {
            type: 'normal',
            connector: true
          },
          barWidth: 60
        },
        tooltip: {
          grouped: true
        },
        legend: {
          align: 'bottom'
        }
      };
      var theme = {
        series: {
          colors: [
            '#83b14e',
            '#458a3f',
            '#295ba0',
            '#2a4175',
            '#289399',
            '#289399',
            '#617178',
            '#8a9a9a',
            '#516f7d',
            '#dddddd'
          ]
        }
      };

      // For apply theme

      // tui.chart.registerTheme('myTheme', theme);
      // options.theme = 'myTheme';

      tui.chart.columnChart(container, data, options);
    </script>
    <!--For tutorial page-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/edit/matchbrackets.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/selection/active-line.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/mode/javascript/javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/javascript-lint.js"></script>
    <script src="./js/example.js"></script>
  </body>
</html>
